<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 300px;
            height: 300px;
            background-color: rgb(175, 126, 204);
        }
        
        #div2 {
            width: 300px;
            height: 300px;
            background-color: rgb(175, 126, 204);
            border-radius: 2px;
        }
    </style>
</head>

<body>
    <input type="text" id="r">r
    <input type="text" id="g">g
    <input type="text" id="b">b
    <button id="dian">点击</button>
    <div id="div1"></div>
    <input type="text" id="w">宽度
    <input type="text" id="h">高度
    <input type="text" id="y">圆角
    <button id="dian1">点击</button>
    <div id="div2"></div>
</body>

</html>
<script>
    var r = document.getElementById('r');
    var g = document.getElementById('g');
    var b = document.getElementById('b');
    var dian = document.getElementById('dian');
    dian.onclick = function() {
        document.getElementById('div1').innerHTML = "";
        var r1 = r.value;
        var g1 = g.value;
        var b1 = b.value;
        if (r1 <= 255 && g1 <= 255 && b1 <= 255) {
            div1.style.backgroundColor = 'rgb(' + r1 + ',' + g1 + ',' + b1 + ')';
        } else {
            document.getElementById('div1').innerHTML = "我太难了"
        }

    }

    // -------------------------------------
    var w = document.getElementById('w');
    var h = document.getElementById('h');
    var y = document.getElementById('y');
    var dian1 = document.getElementById('dian1');
    dian1.onclick = function() {
        var w1 = w.value;
        var h1 = h.value;
        var y1 = y.value;
        document.getElementById('div2').style.height = h1 + 'px';
        document.getElementById('div2').style.width = w1 + 'px';
        document.getElementById('div2').style.borderRadius = y1 + 'px';
    }
</script>